<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
  <head>
    <title>Flash-VideoIO | Flash-based audio and video communication</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="shortcut icon" href="http://myprojectguide.org/sites/default/files/garland_favicon.ico" type="image/x-icon" />
    <link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/book/book.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/node/node.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/system/defaults.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/system/system.css?w" />

<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/system/system-menus.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/user/user.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/forum/forum.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/sites/default/files/color/garland-a725207e/style.css?w" />
<link type="text/css" rel="stylesheet" media="print" href="http://myprojectguide.org/themes/garland/print.css?w" />
        <!--[if lt IE 7]>
      <link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/themes/garland/fix-ie.css" />    <![endif]-->

<style type="text/css">
pre { color: #606060; font-size: small; line-height: 1; }
pre.code { margin-left: 40px; margin-right: 40px; border: 1px dotted grey; padding: 4px 4px 4px 4px; color: #606060; }
b { color: #000000; }
ol { line-height: 1; }
div.info {margin-left: 40px; margin-right: 40px; border: 1px solid grey; padding: 4px 4px 4px 4px;}
p { text-align: justify; }
</style>

<script type="text/javascript">
function getFlashMovie(movieName) {
    var isIE = navigator.appName.indexOf("Microsoft") != -1;
    return (isIE) ? window[movieName] : document[movieName];  
}
</script>


  </head>
  <body class="sidebar-right">

<!-- Layout -->
  <div id="header-region" class="clear-block"></div>

    <div id="wrapper">

    <div id="container" class="clear-block">

      <div id="header">
        <div id="logo-floater">
        <h1><a href="index.html" title="Flash-VideoIO - Flash-based audio and video communication"><img src="http://myprojectguide.org/sites/default/files/garland_logo.png" alt="Gurukul My Project Guide" id="logo" /><span>VideoIO</span> Flash-based audio and video communication</a></h1>
        </div>

                                                    
      </div> <!-- /header -->

      
      <div id="center"><div id="squeeze"><div class="right-corner"><div class="left-corner">

<div class="breadcrumb"><a href="/">Home</a> › <a href="index.html">Flash-VideoIO Tutorial</a></div>

<div id="node-1" class="node">


  
  <div class="content clear-block">

<h2>How to do video broadcast using multicast group?</h2>
  
<p>Flash Player version 10.1 or later allows you to do application level multicast groups instead of point-to-point media streams. Unlike client-server conferences using RTMP, this uses peer-to-peer group communication using centralized rendezvous. Unlike point-to-point RTMFP, this builds an application level multicast group hence is more efficient for video conference or event involving one (or few publishers) and many viewers. Consider the use case of a live event broadcast or live panel discussion broadcast to many viewers.</p>

<p>You must use VideoIO45.swf compiled using Flex SDK 4.5 or later to use this feature.</p>

<p>Adobe also hosts a service, which is free for developers for non-commercial use, to facilitate rendezvous of group communication. In particular, developers can signup for <a href="http://labs.adobe.com/technologies/cirrus/">Cirrus</a> developer key, and then build applications that use their service. Once you sign-up, you get a developer key and an <tt>rtmfp</tt> URL for the service. We have signed up for our VideoIO application with the following URL.</p>

<pre>
rtmfp://p2p.rtmfp.net/cda33663d4a6b46e507bad51-c52c716b8f44/
</pre>

<p>The VideoIO application exposes the group communication feature in the API where you can just set its <tt>src</tt> property to the correct URL and set another <tt>group</tt> property to correct group specifier to enable this application level multicast group communication. For illustrations in this section we assume our Cirrus developer key to connect to the service. In practice you should obtain and use your own developer key.</p>

<p>The example in this tutorial is similar to <a href="7.html">How to do one-to-many video broadcast?</a> except that this uses <tt>rtmfp</tt> URL scheme to enable application level multicast groups instead of a media server, and this uses another <tt>group</tt> property to indicate the name of the multicast group. The one-to-many video broadcast requires all the listeners to know the rendezvous URL to connect to, the stream name to listen and play, and additionally the group name to join. The rendezvous URL and group name can be pre-configured in your application, so that every participant joins the same group. The broadcaster user picks a stream name, say "alice", and set the <tt>src</tt> property of her VideoIO application to enable publish as "rtmfp://.../?group=group1&amp;publish=alice". The viewers use the same stream name to play by setting the <tt>play</tt> parameter in the <tt>src</tt> URL as "rtmfp://.../?group=group1&amp;play=alice". Everything else is taken care of by the VideoIO application instances and Flash Player plugin. The broadcaster or viewer can stop the session by setting the <tt>src</tt> to null or "".</p>

<p>As mentioned before, there are two popular use cases for these kind of video broadcast: an event is broadcast live to number of viewers, or a conversation among small number of panel members is viewed by a number of viewers. In the first use case, we need one broadcast VideoIO and other listener VideoIO instances. The second use case is more complex since it involves both real-time conference among panelists and one-to-many broadcast to viewers. The difference is that the group broadcast mechanism has higher latency hence not suitable for real-time interaction among the panelists. Hence, the panelists should be able to talk using multi-party conference and peer-to-peer streams for low latency conversation. Each panelist also publisher her stream using a new group. All viewers listen to the groups of all the panelists. Since different groups may have different latency during run time, it is possible for the viewers to see or hear the conversation out of order.</p>

<p>In this tutorial we will show the first use case with one broadcast VideoIO and other three listener VideoIO instances as shown below. To test the demonstration, first click on the <tt>set</tt> button of the first VideoIO instance below. This will set the <tt>src</tt> property as specified using the <tt>group</tt> and <tt>publish</tt> URL parameters, and start publishing your video to the specified group name of "demo/group1". Then click on the <tt>set</tt> buttons of the other three VideoIO instances. This will set the <tt>src</tt> property of those VideoIO instances as specified using the <tt>group</tt> and <tt>play</tt> URL parameters, and start playing the stream named "alice" in the group named "demo/group1". You can also notice the latency from broadcaster to viewer.</p>

<script>
function getFlashMovie(movieName) {
    var isIE = navigator.appName.indexOf("Microsoft") != -1;
    return (isIE) ? window[movieName] : document[movieName];  
}
</script>

<table style="width: 640px;">
<tr><td colspan="2">
<input id="url1" type="text" value="rtmfp://p2p.rtmfp.net/cda33663d4a6b46e507bad51-c52c716b8f44/" style="width:440px;"/>
?group=<input id="group1" type="text" value="demo/group1" style="width:120px;"/>
</td></tr>
<tr valign="top">
<td>
	<object type="application/x-shockwave-flash" data="VideoIO.swf"
		id="video1" width="320" height="240">
		<param name="movie" value="VideoIO.swf" />
		<param name="quality" value="high" />
		<param name="bgcolor" value="#000000" />
		<param name="allowFullScreen" value="true" />
		<param name="allowScriptAccess" value="always" />
	</object>
<center>
&amp;publish=
<input id="publish1" type="text" autocomplete="off" style="width:50px;"
    value="alice"/>
<input value="set" type="button" 
    onclick="getFlashMovie('video1').setProperty('src', 
        document.getElementById('url1').value
        + '?group=' + document.getElementById('group1').value 
		+ '&amp;publish=' + document.getElementById('publish1').value)"/>
<input value="reset" type="button" 
    onclick="getFlashMovie('video1').setProperty('src', null)"/>
</center>
</td>
<td>
	<object type="application/x-shockwave-flash" data="VideoIO.swf"
		id="video2" width="320" height="240">
		<param name="movie" value="VideoIO.swf" />
		<param name="quality" value="high" />
		<param name="bgcolor" value="#000000" />
		<param name="allowFullScreen" value="true" />
		<param name="allowScriptAccess" value="always" />
	</object>
<center>
&amp;play=
<input id="play2" type="text" autocomplete="off" style="width:50px;"
    value="alice"/>
&amp;
<input value="set" type="button" 
    onclick="getFlashMovie('video2').setProperty('src', 
        document.getElementById('url1').value
        + '?group=' + document.getElementById('group1').value 
        + '&amp;play=' + document.getElementById('play2').value)"/>
<input value="reset" type="button" 
    onclick="getFlashMovie('video2').setProperty('src', null)"/>
</center>

</td></tr><tr valign="top">
<td>
	<object type="application/x-shockwave-flash" data="VideoIO.swf"
		id="video3" width="320" height="240">
		<param name="movie" value="VideoIO.swf" />
		<param name="quality" value="high" />
		<param name="bgcolor" value="#000000" />
		<param name="allowFullScreen" value="true" />
		<param name="allowScriptAccess" value="always" />
	</object>
<center>
&amp;play=
<input id="play3" type="text" autocomplete="off" style="width:50px;"
    value="alice"/>
<input value="set" type="button" 
    onclick="getFlashMovie('video3').setProperty('src', 
        document.getElementById('url1').value
        + '?group=' + document.getElementById('group1').value 
		+ '&amp;play=' + document.getElementById('play3').value)"/>
<input value="reset" type="button" 
    onclick="getFlashMovie('video3').setProperty('src', null)"/>
</center>
</td>
<td>
	<object type="application/x-shockwave-flash" data="VideoIO.swf"
		id="video4" width="320" height="240">
		<param name="movie" value="VideoIO.swf" />
		<param name="quality" value="high" />
		<param name="bgcolor" value="#000000" />
		<param name="allowFullScreen" value="true" />
		<param name="allowScriptAccess" value="always" />
	</object>
<center>
&amp;play=
<input id="play4" type="text" autocomplete="off" style="width:50px;"
    value="alice"/>
&amp;
<input value="set" type="button" 
    onclick="getFlashMovie('video4').setProperty('src', 
        document.getElementById('url1').value
        + '?group=' + document.getElementById('group1').value 
        + '&amp;play=' + document.getElementById('play4').value)"/>
<input value="reset" type="button" 
    onclick="getFlashMovie('video4').setProperty('src', null)"/>
</center>

</td></tr></table>

<p>The source code of this is similar to earlier examples. You can also right-click and select "View page source" or equivalent menu option to see the source code.</p>

<h2>Summary</h2>

<p>In summary, you can use the <tt>src</tt> property with URL parameters containing <tt>publish</tt> and <tt>group</tt> for broadcast stream, and <tt>play</tt> and <tt>group</tt> for viewer stream. Additionally, you must use the <tt>rtmfp</tt> URL scheme pointing to the rendezvous service. Please see <a href="10.html">How to use the VideoIO API?</a> for details on new properties associated with group communication.</p>

</div>
          </div>

          <div id="footer">&copy; 2010-2011, Kundan Singh, All Rights Reserved.</div>
          
      </div></div></div></div> <!-- /.left-corner, /.right-corner, /#squeeze, /#center -->

              <div id="sidebar-right" class="sidebar">

<div id="block-forum-0" class="clear-block block block-forum">

  <h2>In This Project</h2>

  <div class="content"><div class="item-list">
<ul><li class="first"><a href="index.html">Project Home</a></li>
</ul>
<ol>
<li class="last"><a href="1.html">Embedding</a></li>
<li class="last"><a href="2.html">Live camera view</a></li>
<li class="last"><a href="3.html">Media server</a></li>
<li class="last"><a href="4.html">Record a message</a></li>
<li class="last"><a href="5.html">Play video file</a></li>
<li class="last"><a href="6.html">Two-party call</a></li>
<li class="last"><a href="7.html">Video broadcast</a></li>
<li class="last"><a href="8.html">Multi-party conference</a></li>
<li class="last"><a href="9.html">P2P video call</a></li>
<li class="last"><a href="10.html">VideoIO API</a></li>
<li class="last"><a href="11.html">SIP/VoIP call</a></li>
</ol></div></div>
</div>

<div id="block-forum-1" class="clear-block block block-forum">

  <h2>References</h2>

  <div class="content"><div class="item-list"><ul><li class="first"><a href="http://myprojectguide.org">Gurukul - Student Project Guide</a></li>
<li class="last"><a href="http://code.google.com/p/videocity">Videocity - web video telephony and conference</a></li>
<li class="last"><a href="http://code.google.com/p/rtmplite">rtmplite - lightweight Flash media (RTMP) server in Python</a></li>
<li class="last"><a href="http://myprojectguide.org/node/6">Project Ideas on Multimedia Networking</a></li>
</ul></div></div>
</div>

              </div>

    </div> <!-- /container -->
  </div>
    </body>
</html>
